<template>
		<div class="main">
			<van-cell-group>
				<van-cell class="dhxq" value="兑换详情" />
			</van-cell-group>
			<van-panel v-if="orderId.exchangeType == 0" v-for="(item, index) in orderdetail" :key="index" title="中石化油卡充值卡" status="">
				<div style="padding: 10px 15px;">
					<ul class="van-panel_content">
						<li><label>面值：</label><span class="blue">{{item.money}}</span></li>
						<li><label>卡号：</label><span>{{item.cardNo}}</span></li>
						<li><label>卡密：</label><span>{{item.cardPassword}}</span></li>
						<li><label>充值卡截至日期：</label><span>{{item.expireTime}}</span></li>
					</ul>
				</div>
			</van-panel>
			<van-panel v-if="orderId.exchangeType == 1" v-for="(item, index) in orderdetail" :key="index" title="微信提现详情" status="">
				<div style="padding: 10px 15px;">
					<ul class="van-panel_content">
						<li><label>微信红包：</label><span class="blue">{{item.discountMoney}}</span></li>
						<li><label>权益总量：</label><span>{{item.interests}}</span></li>
						<li><label>权益发放时间：</label><span>{{item.createTime}}</span></li>
						<li><label>权益失效时间：</label><span>{{item.expireTime}}</span></li>
						<li><label>兑换状态：</label>
							<span v-if="item.exchangeStatus === 1" class="blue">已兑换</span>
							<span v-if="item.exchangeStatus === 0" class="blue">未兑换</span>
						</li>
            <!-- <li><label>交易流水号：</label><span>{{item.orderNo}}</span></li> -->
            <li style="font-size:12px;">交易流水号：{{item.orderNo}}</li>
					</ul>
				</div>
				<div style="padding: 20px 15px;color: #888888;border-top: 1px solid #FAFAFA;">
					<span>到账查询</span>
					<p>打开微信-我-钱包-零钱-零钱明细，打款商户包含：“盛大汽车红包提现”</p>
				</div>
			</van-panel>


		</div>
</template>

<script>
import { getInFo } from "../../../api/details.js";
// import { RadioGroup, Radio } from "vant";
export default {
  data() {
    return {
      orderdetail: "",
      orderId: {
        id: this.$route.query.id,
        exchangeType: this.$route.query.exchangeType
      }
    };
  },
  created() {
    this.getInFoList();
  },
  methods: {
    getInFoList() {
      (this.orderdetail = ""),
        getInFo(this.orderId).then(res => {
          if (res.status === 200) {
            this.orderdetail = res.data;
          } else {
            this.$dialog.alert({
              message: res.message
            });
          }
        }).catch(error => {
          if (error.status !== 100 && error.status !== 102 ) {
            this.$toast.fail(error.message);
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.van-panel {
  margin: 10px 10px 20px 10px;
}
.van-panel_content {
  li {
    padding: 5px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    label {
      width: 112px;
      display: inline-block;
    }
  }
  button {
    border: none;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #333333;
  }
}
.blue {
  color: #49b7e0;
  span {
    color: #49b7e0 !important;
  }
  p {
    color: #49b7e0 !important;
  }
}
.red {
  color: #f80606;
}
.fontsize {
  color: #333;
}
.dhxq {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
</style>
